<template>
    <div>
        <h2>历史订单</h2>
        <h3>{{ shop.shopName }}</h3>
        <el-card v-for="(order, index) in orders" :key="index" class="video-card" v-show="order.status!==0">
            <div slot="header" class="video-header" >
                <div class="video-info">
                    <p>总价：{{ order.total }}</p>
                    <p>顾客：{{ order.customer.customerName }}</p>
                </div>
                <P v-if="order.status===1" style="margin-left: 500px">已支付</P>
                <P v-if="order.status===2" style="margin-left: 500px">已确认</P>
                <P v-if="order.status===3" style="margin-left: 500px">已退款</P>
                <el-button type="success" @click="confirm(order.orderId,index)" style="margin-left: 100px" v-if="order.status===1">确认订单</el-button>
                <el-button type="danger" @click="cancel(order.orderId,index)" style="margin-left: 100px" v-if="order.status===1">取消订单</el-button>
                <el-button type="primary" @click="view(order.orderId)" style="margin-left: 100px">查看详情</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import {onBeforeMount, onMounted, ref} from "vue";
import {getByShopId} from "@/api/shop";
import {useRoute} from "vue-router";
import {getOrderByShopId} from "@/api/business";
import {getCustomerByCustomerId} from "@/api/customer";
import {cancelOrder,confirmOrder} from "@/api/order";
import router from "@/router";
import {ElMessage} from "element-plus";
const route=useRoute()
const orders=ref([{
    status:0,
    customerId:null,
    customer:{
        customerName:""
    }
}])
const shop=ref({})
const shopId=ref(0)
onBeforeMount(async () => {
    shopId.value=Number(route.query.shopId)
    let result=await getByShopId(shopId.value)
    shop.value=result.data
    let result2=await getOrderByShopId(shopId.value)
    orders.value=result2.data
    for (let i = 0; i < orders.value.length; i++) {
        let result3=await getCustomerByCustomerId(orders.value[i].customerId)
        orders.value[i].customer=result3.data
    }

});
function view(orderId){
    router.push({path:'/orderDetail',query:{orderId:orderId}})
}
async function confirm(orderId,index) {
    await confirmOrder(orderId)
    ElMessage.success("确认成功")
    orders.value[index].status=2
}
async function cancel(orderId,index) {
    await cancelOrder(orderId)
    ElMessage.success("取消成功")
    orders.value[index].status=3
}
</script>

<style scoped>


.video-card {
    margin-bottom: 20px;
}

.video-header {
    display: flex;
    align-items: center;
}

.video-cover {
    width: 100px;
    height: 80px;
    margin-right: 20px;
}

.video-info {
    flex: 1;
}

</style>